<template>
  <div id="settingMenu">
    <h1>{{$t('m.settings')}}</h1>
    <ul id="settingLi">
     <router-link to="/home/setting/user"><li>个人资料</li></router-link>
     <router-link to="/home/setting/a"><li>密码设置</li></router-link>
     <router-link to="/home/setting/b"><li>待做B</li></router-link>
     <router-link to="/home/setting/c"><li>待做C</li></router-link>
    </ul>
<!--    <route-view/>-->
  </div>
</template>
<script>


  export default {
    name: 'settingMenu',


  }

</script>

<style lang="less" scoped>
  #settingMenu{
    width: 100%;
    height: 90px;
    /*background-color: white;*/
    color: black;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    border-bottom: solid 1px #a4a4a4;
    box-sizing: border-box;
    position: sticky;
    /*background-color: #0606f3;*/
    h1{
      font-size: 36px;
      font-weight: 900;
      /*padding: 30px 30px 0 30px;*/
      color: var(--theme-fontMain);
    }
    ul{
      font-size: 14px;
      display: flex;
      position: absolute;
      bottom: -1px;
    }
    li{
      margin-right: 20px;
      padding-bottom: 3px;
      border-bottom: solid 1px transparent;
      cursor: pointer;
      transition: all 0.2s ease-in-out;
      font-weight: 500;
    }
    li:hover{
      border-bottom: solid 1px #9e5bdf;
    }
  }

</style>
